<template>
  <div>
    <div class="top">
      <el-form :model="formInline">
        <div class="top-fl">
          <el-form-item label="" style="width: 28%; margin-right: 20px">
            <el-input
              size="medium"
              v-model="formInline.username"
              placeholder="反馈人"
            ></el-input>
          </el-form-item>

          <el-form-item label="" style="width: 28%; margin-right: 20px">
            <el-input
              size="medium"
              v-model="formInline.feedtext"
              placeholder="反馈内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 28%; margin-right: 20px">
            <el-date-picker
              v-model="formInline.startDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="top-fl">
          <el-form-item label="" style="width: 28%; margin-right: 20px">
            <el-input
              size="medium"
              v-model="formInline.feedresult"
              placeholder="反馈回复"
            ></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 28%; margin-right: 20px">
            <el-select
              v-model="form.feedstatus"
              placeholder="反馈状态"
              style="width: 100%"
            >
              <el-option label="已处理" :value="1"></el-option>
              <el-option label="未处理" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              size="medium"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button
              type="warning"
              @click="onSubmit2"
              size="medium"
              icon="el-icon-edit"
              >重置</el-button
            >
            <el-button
              type="danger"
              @click="delss"
              size="medium"
              icon="el-icon-delete"
              >批量删除</el-button
            >
            <el-button
              type="success"
              @click="looks()"
              size="medium"
              icon="el-icon-upload"
              >批量导出</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :border="true"
        stripe
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="反馈人" align="center" prop="username">
        </el-table-column>
        <el-table-column label="反馈内容" align="center" prop="feedtext">
        </el-table-column>
        <el-table-column
          label="反馈时间"
          align="center"
          prop="feedtime"
          :formatter="time"
        >
        </el-table-column>
        <el-table-column
          label="服务内容"
          align="center"
          prop="feedresult"
          :formatter="serve"
        >
        </el-table-column>
        <el-table-column
          label="处理状态"
          align="center"
          prop="feedstatus"
          :formatter="dispose"
        >
        </el-table-column>
        <el-table-column label="服务评分" align="center" prop="feedscore">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.feedscore"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
              :colors="colors"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="dispose2(scope.$index, scope.row)"
              >处理</el-button
            >
            <el-button
              size="mini"
              type="primary"
              plain
              @click="details(scope.$index, scope.row)"
              >详 情</el-button
            >
            <el-button size="mini" type="primary" plain @click="look(scope.row)"
              >导 出</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              class="elbtns"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagebox">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ========================================= -->
    <el-dialog title="反馈处理" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="100px">
        <div class="fomtop">
          <el-form-item label="反馈人：" style="width: 100%">
            <el-input
              disabled
              v-model="form.username"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="反馈时间：" style="width: 100%">
            <el-date-picker
              disabled
              style="width: 100%"
              v-model="form.feedtime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="反馈内容：">
          <el-input
            disabled
            type="textarea"
            readonly
            v-model="form.feedtext"
          ></el-input>
        </el-form-item>
        <el-form-item label="回复结果：">
          <el-input
            :disabled="flag"
            readonly
            type="textarea"
            v-model="form.feedresult"
          ></el-input>
        </el-form-item>
        <div class="wrkandljj">
          <el-form-item label="反馈状态：">
            <el-switch
              :disabled="flag"
              v-model="form.feedstatus"
              :active-value="1"
              :inactive-value="2"
              active-text="已处理"
              inactive-text="未处理"
            >
            </el-switch>
          </el-form-item>
          <el-form-item v-if="flag" label="回复评分：">
            <template>
              <el-rate
                v-model="form.feedscore"
                disabled
                text-color="#ff9900"
                score-template="{value}"
                :colors="colors"
                show-text
                style="padding-top: 8px"
              >
              </el-rate>
            </template>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary"
          >取 消</el-button
        >
        <el-button v-if="!flag" @click="reply" type="primary">回 复</el-button>
      </span>
    </el-dialog>
    <!-- ==================== -->
    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
      <span>请选择要删除的房号信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      form: {},
      flag: false,
      dialogVisible: false,
      dialogVisible2: false,
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      formInline: {
        startDate:['','']
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      exci: [],
      delids: [],
      tableData: [],
      texts: ["极差", "失望", "一般", "满意", "惊喜"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索按钮
    async onSubmit() {
      this.loading = true;
      await this.$axios
        .get("/poster/getFeedBack", {
          params: {
            username: this.formInline.username,
            feedtext: this.formInline.feedtext,
            startDate: this.formInline.startDate[0],
            endDate: this.formInline.startDate[1],
            feedresult: this.formInline.feedresult,
            feedstatus: this.formInline.feedstatus,
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.loading = false;
          // console.log(this.tableData);
        });
    },
    // 重置按钮
    onSubmit2() {
      this.currentPage = 1;
      this.pagesize = 10;
      this.formInline = {};
      this.getList();
    },
    looks() {
      this.$confirm("确定导出excel文件？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.look("ok");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    // 批量导出/导出
    look(row) {
      if (row != "ok") {
        var tableData = [row];
      } else {
        var tableData = this.exci;
      }
      // 如果表格数据为空，提示用户
      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "反馈人",
        "反馈内容",
        "反馈时间",
        "服务内容",
        "处理状态",
        "服务评分",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.username || "暂无", // 如果为空，填充为“暂无”
          item.feedtext || "暂无",
          item.feedtime || "暂无",
          item.feedresult || "暂无",
          item.feedstatus || "暂无",
          item.feedscore || "暂无",
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/poster/getFeedBack", {
          params: {
            username: "",
            feedtext: "",
            startDate: "",
            endDate: "",
            feedresult: "",
            feedstatus: "",
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.loading = false;
          // console.log(this.tableData);
        });
    },
    // 归档删除
    handleDelete(row, res) {
      // console.log(res.id);
      // console.log(sessionStorage.getItem('token'));
      this.$confirm("确定永久删除这条反馈信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del(res.f_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除反馈信息",
          });
        });
    },
    async del(id) {
      // console.log(id);
      await this.$axios
        .get("/poster/delFeedback", {
          params: {
            f_id: id,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除反馈信息成功!",
          });
          this.getList();
        });
    },
    //空删除弹框
    delss() {
      if (this.delids.length == 0) {
        this.dialogVisible2 = true;
      } else {
        this.dels();
      }
    },
    // 批量删除
    dels() {
      this.$confirm("确定删除选中的反馈信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios
            .get("/poster/delFeedbackData", {
              params: {
                ids: this.delids.join(","),
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除反馈信息成功!",
              });
              this.getList();
              this.delids = "";
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除反馈信息",
          });
        });
    },
    // 批量选中
    handleSelectionChange(val) {
      this.delids = [];
      this.exci = [];
      this.exci = val;
      for (let i = 0; i < val.length; i++) {
        this.delids[i] = val[i].f_id;
      }
      console.log(this.delids);
    },
    // 分页处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    //格式化时间
    time(a, b, c) {
      return moment(c).format("YYYY-MM-DD HH:mm:ss");
    },
    // 格式化服务类型
    serve(a, b, c) {
      if (c) {
        return c;
      } else {
        return "暂无";
      }
    },
    // 格式化处理状态
    dispose(a, b, c) {
      if (c == 1) {
        return "已处理";
      } else {
        return "未处理";
      }
    },
    // 弹框查看
    dispose2(index, row) {
      this.flag = false;
      this.dialogVisible = true;
      console.log(row);
      this.form = row;
      if (!this.form.feedstatus) {
        this.form.feedstatus = 2; //预处理
      }
    },
    // 弹框回复
    async reply() {
      await this.$axios
        .post("/poster/updateFeedback", {
          f_id: this.form.f_id,
          feedresult: this.form.feedresult,
          feedstatus: this.form.feedstatus,
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          this.dialogVisible = false;
          this.getList();
          this.$message({
            type: "success",
            message: "反馈服务回复成功!",
          });
        });
    },
    // 详情
    details(index, row) {
      this.dialogVisible = true;
      this.flag = true;
      this.form = row;
      if (!this.form.feedstatus) {
        this.form.feedstatus = 2; //预处理
      }
    },
  },
};
</script>
      <style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  /* justify-content: space-between;
        align-items: flex-start */
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
  margin-top: 10px;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
.fomtop {
  display: flex;
  justify-content: space-between;
}
/* .elbtns ::v-deep .el-button--danger .is-plain {
  background-color: #ffffff00;
} */
.wrkandljj {
  display: flex;
  justify-content: space-between;
}
.el-button--primary.is-plain,
.out .el-button--primary {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
.el-button--danger.is-plain,
.el-button--danger.is-plain {
  background-color: #ffffff00;
}
.el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
  color: #F56C6C;
}
</style>